<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.基本用法
        // promise是个函数
        var p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                let flag = true;
                if (flag) {
                    // resolve和reject就相当于return
                    resolve('hello')
                } else {
                    reject('出错了')
                }
            }, 1000)
        });
        p.then(function(data) {
            // 处理resolve返回的结果
            console.log(data);
        }, function(error) {
            // 处理reject返回的结果
            console.log(error);
        })

        // 2.promise发送ajax请求,重点!!!!!!!!!!!!!!!!!!
        function queryData(url) {
            var p = new Promise(function(resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState != 4) return;
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常情况
                        resolve(xhr.responseText);
                    } else {
                        reject('服务器错误')
                    }
                };
                xhr.open('get', url);
                xhr.send(null);
            });
            return p
        }

        queryData('http://localhost:3000/data')
            .then(function(data) {
                console.log(data);
            }, function(info) {
                console.log(info);
            })
            // 3.发送多个ajax请求,解决回调地狱问题
        queryData('http://localhost:3000/data1')
            .then(function(data) {
                console.log(data);
                return queryData('http://localhost:3000/data2')
            }).then(function(data) {
                console.log(data);
                return queryData('http://localhost:3000/data3')
            }).then(function(data) {
                console.log(data);
            })
            // 4.then返回值的问题
            // then返回的是promise对象,则该对象直接调用then
            // then返回的是普通数值,则下一个then中函数的参数默认为该值
            // 会产生一个默认的promise实例对象调用then
        queryData('http://localhost:3000/data')
            .then(function(data) {
                return 'hello'
            }).then(function(data) {
                console.log(data);
            })
            // 5.promise的实例方法,位于promise函数的原型对象中
            // p.then,p.catch,p.finally
            // p.then()获得正常结果
            // p.catch()获得异常结果
            // p.finally()不管是否异常都会返回结果

        // 6.promise的对象方法,挂在promise构造函数上的
        // Promise.all()并发处理多个异步任务,所有任务执行完成之后才能得到结果
        // Promise.race()并发处理多个异步任务,只要有一个完成就能得到结果
        Promise.all([p1, p2, p3]).then((result) => {
            console.log(result);
        });
        // 返回结果是数组,顺序和传参顺序一样
        Promise.race([p1, p2, p3]).then((result) => {
            console.log(result);
        });
        // 只返回最快的结果
    </script>
</body>

</html>